<template>
  <view class="detail-container">
    <view class="basic-info">
      <view class="info-item">
        <text class="label">申请学校：</text>
        <text class="value">{{ detail.schoolName }}</text>
      </view>
      <view class="info-item">
        <text class="label">申请状态：</text>
        <text class="status">{{ statusMap[detail.status] }}</text>
      </view>
      <view class="info-item">
        <text class="label">申请时间：</text>
        <text class="value">{{ detail.applyDate }}</text>
      </view>
      <view class="info-item">
        <text class="label">支教地点：</text>
        <text class="value">{{ detail.location }}</text>
      </view>
    </view>

    <view class="content-box">
      <text class="title">申请内容</text>
      <text class="content">{{ detail.details }}</text>
    </view>

    <view class="action-bar" v-if="detail.status === 'pending'">
      <button class="action-btn cancel" @click="cancelApplication">取消申请</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      detail: {},
      statusMap: {
        pending: '审核中',
        approved: '已通过',
        rejected: '已拒绝'
      }
    }
  },
  onLoad(options) {
    // 根据id获取申请详情
    this.detail = {
      id: options.id,
      schoolName: '阳光希望小学',
      location: '云南丽江',
      applyDate: '2023-07-20',
      status: 'pending',
      details: '申请教授小学三年级数学课程，每周10课时，持续一学期...'
    }
  },
  methods: {
    cancelApplication() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-container {
  padding: 30rpx;
  
  .basic-info {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    
    .info-item {
      display: flex;
      margin-bottom: 20rpx;
      font-size: 28rpx;
      
      .label {
        color: #666;
        width: 160rpx;
      }
      .value {
        color: #2c3e50;
      }
      .status {
        color: #5bc0eb;
      }
    }
  }
  
  .content-box {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    
    .title {
      display: block;
      font-size: 30rpx;
      color: #2c3e50;
      margin-bottom: 20rpx;
    }
    .content {
      color: #666;
      font-size: 26rpx;
      line-height: 1.6;
    }
  }
  
  .action-bar {
    margin-top: 40rpx;
    
    .action-btn {
      background: #fff;
      color: #ff3b30;
      border-radius: 40rpx;
    }
  }
}
</style> 